@import "reset.css";
@import "5-common.less";

* {
  color: #282828;
}

.similar {
  border-radius: 0.25rem;
  overflow: hidden;
  margin-top: 0.21rem;
}

header {

  border-bottom: none;


}

section {

  position: relative;

  div {
    background-color: @baseColor;
  }

  a {
    font-size: 0.24rem;
  }

  .s-box {
    padding: 0 0.3rem;
  }

  .top {
    padding-top: 0.27rem;
    background: transparent;

    .msg {
      width: 0.39rem;
    }

    .setting {
      width: 0.35rem;
    }
  }

  .bg {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -2;
  }

  .info {
    border-radius: 0.25rem;
    overflow: hidden;
    margin-top: 1.75rem;

    .info-top {
      height: 1.87rem;
      font-family: "PingFang SC";
      display: flex;
      align-items: center;
      .border-b;

      .head-shot {
        width: 1.35rem;
        height: 1.35rem;
        margin-right: 0.15rem;
        border-radius: 50%;
        border: 0.08rem solid #f5f5f5;
        overflow: hidden;

        img {
          width: 1.16rem;
        }
      }

      .msg {
        font-size: 0.36rem;

        p:nth-child(2) {
          color: #656565;
          font-size: 0.3rem;
        }
      }
    }

    .info-bottom {
      height: 0.78rem;
      line-height: 0.78rem;
      font-family: "Microsoft YaHei";

      div {
        color: #616161;
        font-size: 0.26rem;

        .red {
          color: @mainColor;
        }
      }
    }
  }

  .myOrder {
    height: 2.42rem;
    .similar;

    .myOrder-top {
      line-height: 0.9rem;
      .border-b;

      h3 {
        font-size: 0.30rem;
      }

      a {
        color: #a6a6a6;
      }
    }

    .myOrder-bottom {
      padding-top: 0.27rem;
      display: flex;
      justify-content: space-around;

      a {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 0.54rem;
          padding-bottom: 0.2rem;
        }

        position: relative;

        &:nth-child(2)::after {
          content: "2";
          display: block;
          width: 0.37rem;
          height: 0.37rem;
          background-color: @mainColor;
          text-align: center;
          line-height: 0.37rem;
          border-radius: 50%;
          position: absolute;
          top: -0.075rem;
          right: -0.25rem;
          color: @baseColor;
        }
      }
    }
  }

  .menu {
    .similar;
    height: 2.62rem;

    h3 {
      line-height: 0.9rem;
      font-size: 0.3rem;
      .border-b;
    }

    .menu-icons {
      display: flex;
      justify-content: space-around;
      padding-top: 0.39rem;

      a {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 0.55rem;
          padding-bottom: 0.2rem;
        }
      }
    }
  }

  .ads {
    .similar;

    img {
      width: 100%;
    }
  }
}


footer {
  height: 1.13rem;
  background-color: @baseColor;

  .container20 {
    display: flex;
    justify-content: space-between;

    a {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.29rem;
      padding-top: 0.15rem;
      color: #545454;

      img {
        width: 0.48rem
      }

    }

    .active {
      color: @mainColor !important;
    }
  }


}


